
<?php
    include('inc/pages_head.php');
?>
<body>
<!--============================== Header =================================-->
<header>
    <?php    include('inc/pages_header_menu.php');?>
</header>
<!--============================== Slider =================================-->
<div class="wrapper">
  <article>
    <div class="fullwidthbanner-container">
      <div class="fullwidthbanner">
        <ul>
          <!-- FADE -->
          <li data-transition="fade" data-slotamount="10" > <img src="images/slider/slider_bg1.jpg">
            <div class="caption lft" data-x="-150" data-y="30" data-speed="900" data-start="900" data-easing="easeOutBounce"><img src="images/slider/img_slider1.png"></div>
            <div class="caption lfr big_black" data-x="470" data-y="100" data-speed="400" data-start="1700" data-easing="easeOutExpo">kreatives Design</div>
            <div class="caption lfr big_green"  data-x="478" data-y="155" data-speed="400" data-start="1900" data-easing="easeOutExpo">aus Heidelberg</div>
            <div class="caption sfl" data-x="478" data-y="245" data-speed="300" data-start="2600" data-easing="easeOutExpo"><img src="images/slider/check.png"></div>
            <div class="caption lft small_text"  data-x="510" data-y="230" data-speed="300" data-start="2600" data-easing="easeOutExpo"><span class="color_black">Print &</span> <span class="color_green">Logodesign</span></div>
            <div class="caption sfl" data-x="478" data-y="285" data-speed="300" data-start="2900" data-easing="easeOutExpo"><img src="images/slider/check.png"></div>
            <div class="caption lft small_text"  data-x="510" data-y="270" data-speed="300" data-start="2900" data-easing="easeOutExpo"><span class="color_green">Corporate Design</span> <span class="color_black"></span></div>
            <div class="caption sfl" data-x="478" data-y="325" data-speed="300" data-start="3200" data-easing="easeOutExpo"><img src="images/slider/check.png"></div>
            <div class="caption lft small_text"  data-x="510" data-y="310" data-speed="300" data-start="3200" data-easing="easeOutExpo"><span class="color_black">Druck von Printmedien</span> </div>
            <div class="caption sfb"  data-x="515" data-y="370" data-speed="800" data-start="3400" data-easing="easeOutExpo"><a href="#" class="button green">mehr</a></div>
          </li>
          <!-- SLIDEUP -->
          <li data-transition="fade" data-slotamount="15" data-thumb="images/revolution/slides/thumb4.jpg"> <img src="images/slider/slider_bg2.jpg">
            <div class="caption sfb" data-x="250" data-y="90" data-speed="900" data-start="900" data-easing="easeOutBack"><img src="images/slider/img_slider2.png"></div>
            <div class="caption lfl very_big_white"  data-x="20" data-y="200" data-speed="800" data-start="1200" data-easing="easeOutExpo">Vom ersten Entwurf</div>
            <div class="caption lfl very_big_green"  data-x="20" data-y="265" data-speed="800" data-start="1300" data-easing="easeOutExpo">bis zur </div>
            <div class="caption lfl very_big_white"  data-x="20" data-y="330" data-speed="800" data-start="1400" data-easing="easeOutExpo">Druckvorlage</div>
          </li>
          <!-- FADE -->
          <li data-transition="fade" data-slotamount="10" > <img src="images/slider/slider_bg1.jpg">
            <div class="caption lft" data-x="-150" data-y="30" data-speed="900" data-start="900" data-easing="easeOutBounce"><img src="images/slider/img_slider1.png"></div>
            <div class="caption lfr big_black" data-x="470" data-y="100" data-speed="400" data-start="1700" data-easing="easeOutExpo">WEBDESIGN </div>
            <div class="caption lfr big_green"  data-x="478" data-y="155" data-speed="400" data-start="1900" data-easing="easeOutExpo">think out of the Box</div>
            <div class="caption sfl" data-x="478" data-y="245" data-speed="300" data-start="2600" data-easing="easeOutExpo"><img src="images/slider/check.png"></div>
            <div class="caption lft small_text"  data-x="510" data-y="230" data-speed="300" data-start="2600" data-easing="easeOutExpo"><span class="color_black">HTML 5 +</span> <span class="color_green">CSS3</span></div>
            <div class="caption sfl" data-x="478" data-y="285" data-speed="300" data-start="2900" data-easing="easeOutExpo"><img src="images/slider/check.png"></div>
            <div class="caption lft small_text"  data-x="510" data-y="270" data-speed="300" data-start="2900" data-easing="easeOutExpo"><span class="color_green">Shopsystem &</span> <span class="color_black">E-Commerce</span></div>
            <div class="caption sfl" data-x="478" data-y="325" data-speed="300" data-start="3200" data-easing="easeOutExpo"><img src="images/slider/check.png"></div>
            <div class="caption lft small_text"  data-x="510" data-y="310" data-speed="300" data-start="3200" data-easing="easeOutExpo"><span class="color_black">Content Management System</span> <span class="color_green">(CMS)</span></div>
            <div class="caption sfb"  data-x="515" data-y="370" data-speed="800" data-start="3400" data-easing="easeOutExpo"><a href="#" class="button green">mehr</a></div>
          </li>
          <!-- SLIDEUP -->
          <li data-transition="slideup" data-slotamount="7" data-thumb="images/revolution/thumbs/thumb2.jpg"> <img src="images/slider/slider_bg3.jpg">
            <div class="caption lfr" data-x="-200" data-y="-30" data-speed="900" data-start="900" data-easing="easeOutExpo"><img src="images/slider/img_slider3.png"></div>
            <div class="caption lfb very_big_white"  data-x="500" data-y="90" data-speed="600" data-start="1800" data-easing="easeOutExpo">Deine Webseite</div>
            <div class="caption lfb very_big_white"  data-x="500" data-y="162" data-speed="600" data-start="1900" data-easing="easeOutExpo">für Iphone</div>
            <div class="caption lfb very_big_white"  data-x="500" data-y="234" data-speed="600" data-start="2000" data-easing="easeOutExpo"> & Ipad </div>
            <div class="caption lfb very_big_white"  data-x="500" data-y="306" data-speed="600" data-start="2100" data-easing="easeOutExpo">optimieren</div>
          </li>
        </ul>
        <div class="tp-bannertimer"></div>
      </div>
    </div>
  </article>
</div>
<!--============================== Tag Line =================================-->
<div class="wrapper tagline">
  <div class="container_12 cont_pad2">
    <article class="grid_10">
      <h3 class="font_heading02 color_white">wir sind kreative Dienstleister mit Schwerpunkt Print & Web -design</h3>
      <h5 class="color_gray"> arbeiten wir für Agenturen sowie für Unternehmen, Organisationen und Institutionen und Wir lieben gutes Design. </h5>
    </article>
    <article class="grid_2 last-col"> <!-- placeholder--> </article>
    <div class="brd"></div>
  </div>
</div>
<!--============================== Content ================================-->
<section id="content" class="cont_pad">
  <div class="container_12">
    <article class="grid_4"> <img src="images/hicon1.png" alt="" class="f_left">
      <h3 class="color_black font_heading margin_heading">WEBDESIGN</h3>
      <p>Was soll Ihre Website bewir- ken, wen möchten Sie damit erreichen? Gutes Webdesign kommt ohne Erklärungen aus. Eine intuitive Benutzerführung und ein klares Kommunikationsziel bilden das Fundament, auf dem meine maßgeschneiderten Konzepte aufbauen. Stets im Fokus: der Kundennutzen.
    <dl class="corporateDesign">
      <dt> → Unternehmensauftritte</dt>
      <dd> → Online-Shops</dd>
      <dt> → Onlinecommunitys</dt>
    </dl>
</p>
      <a href="#" class="more">mehr</a> </article>
    <article class="grid_4"> <img src="images/hicon2.png" alt="" class="f_left">
      <h3 class="color_black font_heading margin_heading">PRINTDESIGN</h3>
      <p>Drucksachen sind Wertsachen. Nicht nur inhaltlich, sondern auch optisch und haptisch hinterlassen sie einen bleibenden Eindruck, wenn Material, Drucktechnik und Bindung bestmöglich eingesetzt werden. Ich visualisiere Ihre Botschaft und sorge dafür, dass sie bei der Zielgruppe ankommt.
    <dl class="corporateDesign">
      <dt> → Plakate und Flyer</dt>
      <dd> → Broschüren</dd>
      <dt> → Verpackungsdesign</dt>
    </dl>
</p>
      <a href="#" class="more">mehr</a> </article>
    <article class="grid_4"> <img src="images/hicon3.png" alt="" class="f_left">
      <h3 class="color_black font_heading margin_heading">CORPORATE DESIGN</h3>
      <p>Ein unverwechselbares Erscheinungsbild wirkt identitätsstiftend und vertrauensbildend. Ich mache Ihre Unternehmensidentität visuell erlebbar und ermögliche Ihnen mit der einheitlichen Gestaltung Ihrer Kommunikationsmittel eine Außenwirkung mit Wiedererkennungswert.
    <dl class="corporateDesign">
      <dt> → Wort- und Bildmarken (Logos)</dt>
      <dd> → Geschäftspapiere, Imagebroschüren</dd>
      <dt> → Corporate-Design-Leitfäden</dt>
    </dl>
</p>
      <a href="#" class="more">mehr</a> </article>
  </div>
</section>


<!--============================== Content ========Modern Design========================-->
<section id="content" >
  <div class="container_12">
    <ul class="ch-grid">
      <li>
        <div class="ch-item">
          <div class="ch-info">
            <div class="ch-info-front ch-img-1"></div>
            <div class="ch-info-back">
              <h3>FRONTEND-ENTWICKLUNG</h3>
              <p>(X)HTML, HTML 5 CSS 3 und YAML CSS-Framework jQuery, JavaScript, Ajax Themes für Wordpress und Joomla Markup nach W3C- und SEO-Standards</p>
            </div>
          </div>
        </div>
      </li>
      <li>
        <div class="ch-item">
          <div class="ch-info">
            <div class="ch-info-front ch-img-2"></div>
            <div class="ch-info-back">
              <h3>BACKEND-ENTWICKLUNG</h3>
              <p>individuelle <strong>Content Management Systeme</strong> (CMS) mit TYPO3, Joomla und Wordpress Webservices <strong>Webentwicklung</strong> mit PHP und Zend-Framework MySQL Datenbanken</p>
            </div>
          </div>
        </div>
      </li>
      <li>
        <div class="ch-item">
          <div class="ch-info">
            <div class="ch-info-front ch-img-3"></div>
            <div class="ch-info-back">
              <h3>TEXT</h3>
              <p>Texterstellung (Web/Print) Werbetexte, Slogans und Claims Suchmaschinenoptimierung (SEO) Lektorat und Korrektorat Übersetzung (Englisch, Französisch)</p>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</section>
<!--============================== Content ============Recent Work====================-->
<section class="cont_pad">
  <div class="container_12">
    <div class="heading_line">
      <h3 class="color_black font_heading ucase"><span>Recent Work</span></h3>
    </div>
    <div class="portfolio-grid">
      <ul id="thumbs">
        <li class="col4">
          <div class="view view-tenth"> <img src="images/pf/pic1.jpg" />
            <div class="mask">
              <h2>Title Here</h2>
              <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fug nulla pariatur.</p>
              <a href="images/pf/pic1.jpg" class="preview info" data-rel="prettyPhoto[web]">preview</a> </div>
          </div>
        </li>
        <li class="col4">
          <div class="view view-tenth"> <img src="images/pf/pic2.jpg" />
            <div class="mask">
              <h2>Title Here</h2>
              <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fug nulla pariatur.</p>
              <a href="images/pf/pic2.jpg" class="preview info" data-rel="prettyPhoto[web]">preview</a> </div>
          </div>
        </li>
        <li class="col4">
          <div class="view view-tenth"> <img src="images/pf/pic3.jpg" />
            <div class="mask">
              <h2>Title Here</h2>
              <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fug nulla pariatur.</p>
              <a href="images/pf/pic3.jpg" class="preview info" data-rel="prettyPhoto[web]">preview</a> </div>
          </div>
        </li>
        <li class="col4">
          <div class="view view-tenth"> <img src="images/pf/pic4.jpg" />
            <div class="mask">
              <h2>Title Here</h2>
              <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fug nulla pariatur.</p>
              <a href="images/pf/pic4.jpg" class="preview info" data-rel="prettyPhoto[web]">preview</a> </div>
          </div>
        </li>
        <li class="col2">
          <div class="view view-tenth"> <img src="images/pf/pic11.jpg" />
            <div class="mask">
              <h2>Title Here</h2>
              <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fug nulla pariatur.</p>
              <a href="images/pf/pic11.jpg" class="preview info" data-rel="prettyPhoto[web]" style="bottom:-220px;">preview</a> </div>
          </div>
        </li>
        <li class="col4">
          <div class="view view-tenth"> <img src="images/pf/pic8.jpg" />
            <div class="mask">
              <h2>Title Here</h2>
              <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fug nulla pariatur.</p>
              <a href="images/pf/pic8.jpg" class="preview info" data-rel="prettyPhoto[web]">preview</a> </div>
          </div>
        </li>
        <li class="col4">
          <div class="view view-tenth"> <img src="images/pf/pic7.jpg" />
            <div class="mask">
              <h2>Title Here</h2>
              <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fug nulla pariatur.</p>
              <a href="images/pf/pic7.jpg" class="preview info" data-rel="prettyPhoto[web]">preview</a> </div>
          </div>
        </li>
        <li class="col2 last">
          <div class="view view-tenth"> <img src="images/pf/pic13.jpg" />
            <div class="mask">
              <h2>Title Here</h2>
              <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fug nulla pariatur.</p>
              <a href="images/pf/pic13.jpg" class="preview info" data-rel="prettyPhoto[web]" style="bottom:-40px;">preview</a> </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</section>

<?php    include('inc/pages_footer.php');?>
</body>
</html>
